import React, {FC, useMemo} from 'react';
import useList, {ListOperate} from '@/hooks/useList';
import {ProColumns} from '@ant-design/pro-table';
import service from './service';
import {HistoryLogModel} from './data';
import Details from './components/Details';
import ProTableCrud, {ProTableCrudOperate} from "@/components/ProTableCrud";
import {Select, Tag} from "antd";
import moment from "moment";
import {formatDate} from "@/utils/utils";
import {DialogOperate} from "@/global";
import useDialog from "@/hooks/useDialog";

const Option = Select.Option;
const startDate = moment().subtract(7, 'd');
const endDate = moment();

/** 系统历史日志模块 */
const HistoryLogPage: FC = () => {
  const detailsOperate = useDialog();

  //List
  const listOperate = useList<HistoryLogModel>({
    onLoad: (params) => {
      const {operateDateTime, ...rest} = params;
      const operateStartDateTime = (operateDateTime && operateDateTime[0]) || (formatDate(startDate));
      const operateEndDateTime = (operateDateTime && operateDateTime[1]) || (formatDate(endDate));
      return service.selectPageList({...rest, operateStartDateTime, operateEndDateTime});
    },
  });

  //表格列
  const cols = useMemo(() => getCols(listOperate, detailsOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<HistoryLogModel> = {
    showToolbar: false,
    showOptionColumn: false,
    cols,
    listOperate,
    detailsOperate,
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <ProTableCrud rowSelection={undefined} operate={tableOperate}/>
  );
};

/** 获取表格列 */
function getCols(listOperate: ListOperate<HistoryLogModel>, detailsOperate: DialogOperate): (ProColumns<HistoryLogModel>[]) {
  return [
    {
      title: '操作日期',
      dataIndex: 'operateDateTime',
      align: 'center',
      sorter: true,
      width: 170,
      order: 5,
      valueType: 'dateRange',
      initialValue: [startDate, endDate],
      render: (text, r) => (<a onClick={() => detailsOperate.show({id: r.id})}>{text}</a>),
      formItemProps: {
        'placeholder': ['开始日期', '结束日期'],
        'disabledDate': (current: any) => {
          //不能选择大于今天的日期
          return current && current > moment();
        },
      },
    },
    {
      title: '操作人',
      dataIndex: 'operateUserName',
      align: 'center',
      width: 200,
      formItemProps: {
        'placeholder': '请输入操作人',
      },
    },
    {
      title: '操作类型',
      dataIndex: 'category',
      align: 'center',
      width: 100,
      filters: undefined,
      render: (_, r) => {
        let color = 'default';
        if (r.category === 1) {
          color = '#5cb85c';
        } else if (r.category === 2) {
          color = '#337ab7';
        } else if (r.category === 3) {
          color = '#d9534f';
        }
        return (
          <Tag color={color} key={r.category}>
            {r.categoryName}
          </Tag>
        );
      },
      renderFormItem: (item, {type, defaultRender, ...rest}) => {
        return (<Select {...rest} onSelect={listOperate.handleSearch} defaultValue="">
          <Option key="all" value="">全部类型</Option>
          <Option key="1" value="1">新增</Option>
          <Option key="2" value="2">修改</Option>
          <Option key="3" value="3">删除</Option>
        </Select>)
      },
    },
    {
      title: '数据主键',
      dataIndex: 'primaryKey',
      width: 300,
      formItemProps: {
        'placeholder': '请输入数据主键',
      },
    },
    {
      title: '数据表名',
      dataIndex: 'tableName',
      width: 300,
      formItemProps: {
        'placeholder': '请输入数据表名',
      },
    },
    {
      key: 'other',
    },
  ]
}

export default HistoryLogPage;


